import React, { Component } from 'react';
import { Table, Layout, message, Modal, Tooltip, Divider, Menu, Dropdown, Tag } from 'antd';
import ModuleDrawer from './ModuleDrawer';
import '../less/index.less';
import { inject, observer } from 'mobx-react';
import ModuleTreeDrawer from './ModuleTreeDrawer';
import { createFromIconfontCN, DownOutlined } from '@ant-design/icons';

const Icon = createFromIconfontCN({ scriptUrl: 'public/icon/all.js' });
const { Content } = Layout;

@inject('store')
@observer
class Root extends Component {

  onAddModule = record => {
    this.props.store.showModuleDrawer({ parentId: record.id, parentName: record.name });
  };

  onEditModule = record => {
    this.props.store.showModuleDrawer(record);
  };

  onDeleteModule = record => {
    let that = this;
    Modal.confirm({
      title: '确认删除这条记录吗？',
      async onOk() {
        await that.props.store.deleteModule(record);
        message.success('删除功能菜单成功！');
      },
    });
  };

  onMoveModule = record => {
    this.props.store.showModuleTreeDrawer(record);
  };

  onExpandRow = (expanded, record) => {
    this.props.store.expandRow(expanded, record);
  };

  render() {
    const { store } = this.props;

    const columns = [{
      title: '菜单名称', dataIndex: 'name', key: 'name', width: 250, render: function(text, record) {
        return (<span>
          <a onClick={() => this.onEditModule(record)}>
            {record.icon ? <Icon type={record.icon} style={{ marginRight: 5 }}/> : ''} {text}
          </a>
        </span>);
      }.bind(this),
    }, { title: '菜单路径', dataIndex: 'url', key: 'url', width: 400 },
      { title: '菜单描述', dataIndex: 'remark', key: 'remark' },
      {
        title: '自动运行',
        dataIndex: 'isAutorun',
        key: 'isAutorun',
        width: 80,
        align: 'center',
        render: function(text, record) {
          if (record.id == '0') {
            return '';
          }
          if (record.isAutorun) {
            return <Tag color={'#f50'}>是</Tag>;
          } else {
            return <Tag color={'#87d068'}>否</Tag>;
          }
        },
      }, {
        title: '当前状态',
        dataIndex: 'status',
        key: 'status',
        width: 80,
        align: 'center',
        render: function(text, record) {
          if (record.id == '0') {
            return '';
          }
          if (record.status) {
            return <Tag color={'#2db7f5'}>启用</Tag>;
          } else {
            return <Tag color={'black'}>停用</Tag>;
          }
        },
      }, {
        title: '操作', width: 200, align: 'center', render: function(text, record) {
          let disabled = record.isFixed ? 'disabled' : null;
          const menu = (
            <Menu>
              <Menu.Item><a onClick={() => this.onEditModule(record)}>修改菜单</a></Menu.Item>
              <Menu.Item><a onClick={() => this.onDeleteModule(record)}>删除菜单</a></Menu.Item>
              <Menu.Item><a onClick={() => this.onMoveModule(record)}>移动到...</a></Menu.Item>
            </Menu>
          );
          return (<span>
            <Tooltip title='新增下级菜单' placement="bottom">
              <a onClick={() => this.onAddModule(record)}>新增菜单</a>
            </Tooltip>
            <Divider type='vertical'/>
            <Dropdown disabled={record.id == '0' ? true : false} overlay={menu}>
              <a className="ant-dropdown-link">更多<DownOutlined/></a>
            </Dropdown>
          </span>);
        }.bind(this),
      }];

    return (
      <Layout className='layout'>
        <Content className='content'>
          <Table rowKey="id" size={'middle'} loading={store.moduleTreeData.loading}
                 expandedRowKeys={store.moduleTreeData.expandedKeys} onExpand={this.onExpandRow}
                 dataSource={store.moduleTreeData.dataSource} columns={columns}
                 pagination={false}></Table>
          <ModuleDrawer/>
          <ModuleTreeDrawer/>
        </Content>
      </Layout>
    );
  }
}

export default Root;
